<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据表格</title>
    <script src="./font.js"></script>
    <script src="./jspdf.js"></script>
    <script src="./autotable.js"></script>
    <script src="./exportToPDF.js"></script>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
      button {
        margin: 20px 0;
        padding: 10px 15px;
        background-color: #4caf50;
        color: white;
        border: none;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <button onclick="exportToPDF()">导出PDF</button>
    <div id="tableContainer"></div>
    <script>
      // 模拟API请求获取数据
      async function fetchData() {
        // 模拟API延迟
        await new Promise((resolve) => setTimeout(resolve, 1500));

        // 返回模拟数据
        return {
          data: [
            {
              id: 1,
              name: "张三",
              age: 28,
              city: "北京",
              job: "软件工程师",
              salary: 8000,
              hireDate: "2020-01-15",
            },
            {
              id: 2,
              name: "李四",
              age: 32,
              city: "上海",
              job: "产品经理",
              salary: 12000,
              hireDate: "2019-03-22",
            },
            {
              id: 3,
              name: "王五",
              age: 25,
              city: "广州",
              job: "UI设计师",
              salary: 9000,
              hireDate: "2021-05-10",
            },
            {
              id: 4,
              name: "赵六",
              age: 35,
              city: "深圳",
              job: "数据分析师",
              salary: 15000,
              hireDate: "2018-11-20",
            },
            {
              id: 5,
              name: "钱七",
              age: 29,
              city: "杭州",
              job: "前端开发",
              salary: 11000,
              hireDate: "2020-07-15",
            },
            {
              id: 6,
              name: "孙八",
              age: 31,
              city: "成都",
              job: "后端开发",
              salary: 13000,
              hireDate: "2019-09-05",
            },
            {
              id: 7,
              name: "周九",
              age: 27,
              city: "武汉",
              job: "测试工程师",
              salary: 8500,
              hireDate: "2021-02-28",
            },
            {
              id: 8,
              name: "吴十",
              age: 33,
              city: "西安",
              job: "项目经理",
              salary: 16000,
              hireDate: "2017-12-01",
            },
            {
              id: 9,
              name: "郑十一",
              age: 26,
              city: "南京",
              job: "产品助理",
              salary: 7500,
              hireDate: "2021-08-12",
            },
            {
              id: 10,
              name: "王十二",
              age: 30,
              city: "重庆",
              job: "运维工程师",
              salary: 9500,
              hireDate: "2020-04-25",
            },
          ],
        };
      }

      // 渲染表头
      var theadList = [
          {
            name: "ID",
            props: "id",
          },
          {
            name: "姓名",
            props: "name",
          },
          {
            name: "年龄",
            props: "age",
          },
          {
            name: "城市",
            props: "city",
          },
          {
            name: "职业",
            props: "job",
          },
          {
            name: "收入",
            props: "salary",
          },
          {
            name: "入职日期",
            props: "hireDate",
          },
        ];
      function renderTableHeader() {
 
        const thead = document
          .getElementById("dataTable")
          .getElementsByTagName("thead")[0];
        thead.innerHTML = "";
        const headerRow = thead.insertRow();
        theadList.forEach((text) => {
          const th = document.createElement("th");
          th.textContent = text.name;
          headerRow.appendChild(th);
        });
      }

      // 渲染表格数据
      async function renderTable() {
        const response = await fetchData();
        const table = document
          .getElementById("dataTable")
          .getElementsByTagName("tbody")[0];
        table.innerHTML = ""; // 清空现有数据
        response.data.forEach((item) => {
          const row = table.insertRow();
          let propsList = theadList.map((e) => e.props);
          propsList.forEach((e, i) => {
            row.insertCell(i).textContent = item[e];
          });
        });
      }

      // 创建表格元素
      function createTableElement() {
        const container = document.getElementById("tableContainer");
        const table = document.createElement("table");
        table.style.position = "absolute";
        table.style.left = "-9999px";
        table.id = "dataTable";
        table.innerHTML = "<thead></thead><tbody></tbody>";
        container.appendChild(table);
      }

      // 页面加载时创建表格并渲染
      document.addEventListener("DOMContentLoaded", () => {
        createTableElement();
        renderTableHeader();
        renderTable();
      });
      // 导出PDF功能
    </script>
  </body>
</html>
